<template>
	<!-- 系列课程 -->
	<view class="catena-content">
		<!-- 标题 -->
		<view class="catena-title">
			系列课程
		</view>
		<scroll-view class="scroll" scroll-x="true" @scroll="scroll" scroll-left="120">
			<view class="catena-dis">
				<view class="catena-view">
					<image src="https://edu-image.nosdn.127.net/A30930FDC4D66404511B34EB985F7846.png?imageView&quality=100&thumbnail=225y125&type=webp" />
				</view>
				<view class="catena-view">
					<image src="https://edu-image.nosdn.127.net/f69d9417-73b0-451e-be97-a2af674b5789.jpg?imageView&quality=100&crop=0_2_1938_1085&thumbnail=223y124" />
				</view>
				<view class="catena-view">
					<image src="https://edu-image.nosdn.127.net/2e05c8afd0364699bb498468c7b4484b.png?imageView&quality=100&crop=0_0_1920_1080&thumbnail=223y124" />
				</view>

			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {}
		},
		methods:{
			scroll(){
				
			}
		}
	}
</script>

<style scoped>
	.catena-content {
		margin: 30rpx 15rpx;
	}

	.catena-title {
		font-size: 35rpx;
		height: 50rpx;
		line-height: 50rpx;
		padding-left: 15rpx;
		margin-bottom: 20rpx;
	}

	.scroll {
		/* padding: 0 15rpx; */
		white-space: nowrap;
		width: 100%;
		height: 300upx;
		padding-left: 10upx;
	}

	.catena-dis {
		/* 横向滚动 */
		display: flex;
		/* 图片两边排开 */
		justify-content: space-between;
	}

	.catena-view {
		height: 300upx;
		width: 500upx;
		padding: 0 8upx;
	}

	.catena-view image {
		width: 500upx;
		height: 250upx;
		border-radius: 8upx;
	}

	.catena-dis view:nth-child(2) {
		padding: 0 7upx !important;
	}
</style>
